<template>
  <div id="1" ref="pie_first" class="pie_first" />
</template>

<script>
export default {
  data() {
    return {
      pie_first: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },

  methods: {
    initChart() {
      console.log('first')
      if (this.pie_first !== null && this.pie_first !== '' && this.pie_first !== undefined) {
        this.pie_first.dispose()// 销毁
      }
      this.pie_first = this.$echarts.init(this.$refs.pie_first)

      const option = {
        title: {
          text: '政务数据资源链合约',
          textStyle: {
            color: '#1FFCE5',
            fontSize: 16
          },
          left: 'center',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          right: '8%',
          icon: 'circle',
          orient: 'vertical',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#1FFCE5'
          }
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          center: ['35%', '42%'],
          radius: ['40%', '65%'],
          avoidLabelOverlap: false,
          label: {
            show: false

          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }]
      }

      this.pie_first.setOption(option)
    }
  }

}
</script>

<style lang="less" scoped>
.pie_first{
    width: 100%;
    height: 100%;
}
</style>
